back to index
You can also put lists within lists if you wish like I have done with the index. This is called a nested list and is written like so:
<UL>
<LI>Lists
<OL>
<LI>Ordered
<LI>Unordered
<LI>Defined
</OL>
<LI>Styles
<OL>
<LI>Strong
<LI>Emphasis
<LI>Computer Code
</OL>
</LI>
</UL>
As seen above you do need an ending </OL> or </UL> for each list but only one ending </LI> at the completion of the nested list. Of course how you makeyour nested list is entirely up to you whether it be UL in OL, DL in UL, or whatever. The above example would look like this on your page:
- Lists
- Ordered
- Unordered
- Defined
- Styles
- Strong
- Emphasis
- Computer Code
This produces a horizontal line that can be used
to separate sections of your page. There are four
options that can be used in writing it. The first
is size, which equals the thickness of the line
and is represented by a number. Next is width,
which determines how far across the page the line
will extend and is represented by a percentile.
Then there is alignment, which can be left,
right, or center. To make your line a black line,
include the command NOSHADE. It is written as
such:
<HR SIZE="10" WIDTH="50%" ALIGN="CENTER"
NOSHADE>
And looks like:
We can now learn how to make links, which are the
foundation the web is built upon, leading us from
one page to another. They can also be used to
spiff up your page with images, sounds, and
backgrounds. There are three basic types I will
cover: external, internal, and mailto.
The external link basically takes you to another
page. It is composed of three parts within the
< and > signs. A, which is known as the
anchor command, HREF, which tells the browser to
create a pathway, and the URL of the page you
want to link to. AN anchor is the word, phrase,
or image you wish to use as the clickable link.
The code is written as follows:
<A HREF="http:// your URL
">LINKING</A>
Whatever is between the <A HREF> and
</A>, in this case the word LINKING, is the
anchor word. This takes someone to the page you
want when clicked on. We will talk aout clickable
images in the IMAGES section. This example:
<A
HREF="https://members.tripod.com/~Constantine_7/wi
erd.html">Wierd sites</A>
looks like this:
Wierd sites
and will take you to my page about wierd links.
You may center/align it as you wish if it is a
stand-alone word or phrase (not in a sentence).
Notice the color of the text is different. This
is because we set a certain color for links at
the beginning of our page in the BODY
BACKGROUND/BGCOLOR command.
Transitions give you the cool effect of having
whatever page you link to seem to wipe off or
zoom out from the page you just left. Click here to
see an exampl of this effect and hit your back
button to return. T0 do this you add a TRANSITON= statement to the end
of your A HREF command:
<A HREF="http:// URL "
TRANSITION="wipeleft">
Here is a listing of
all the different transition effects i have
found. Just click on each to see the desired
effect.
blackfade |
fades in new screen |
slidedown |
slides new screen from top to bottom over old
one |
slideleft |
slides new screen over old one from left |
slideright |
slides new screen over old from right |
slideup |
slides new screen over old bottom to top |
wipedown |
wipes old page off from top to bottom |
wipeleft |
wipes old page off left to write |
wiperight |
wipes off old page right to left |
wipeup |
wipes old page off from bottom to top |
An internal link will take you to a different
part of the same document. For example, click on
top and you will be
transported back to the index of this guide. Then
click on INTERNAL to be brought back to this
section. Internal linking is written in two
parts, the first of which is the <A NAME>
command. Basically, you must name the part of
the document you wish to link to. When I linked
to this section I wrote this next to my heading
of INTERNAL:
<A NAME="IN">INTERNAL</A>
Of course you would use whatever name you chose.
You do still have to use the ending </A>
command. If by chance you are naming (or linking)
text that is in between headers then these
commands must also fall within the headers, next
to your text, like so:
<H2><A
NAME="IN">INTERNAL</A></H2>
Now that you have a name for the place you wish
to link to you must create the second part, which
is the link itself. It is written the same as an
external link but with the character # and
whatever name you chose for the section you are
linking to. The URL is no longer needed unless
you are linking to a specific section in another
page. More on that next. The link here looks
like:
<A HREF="#IN">INTERNAL<A>
IN, as discussed, is the name of the place I wish
to link to. The # character basically tells the
browser to go to the place named.
You can combine external and internal links to go
to a specific section of a different page. This
is done by combining the URL of the page and the
named section you wan to go to. NOTE: You must
get permission from the author of that page to do
this or he must have already named the section
you wish to go to and you know that name. The
folowing would take you directly to the middle of
my homepage design site, at which point I have
put a listing of HTML sites.
<A
HREF="https://members.tripod.com/~Constantine_7/ho
mepagedesign.html#LINKS">LINKS</A>
I named that section LINKS around the word guide.
The above example would look like this on your
page:
LINKS
Try it and see!!!!
This is a link that basically allows people to
mail you directly from your site. You can use
text or an image to do this. The codes are:
<A HREF="mailto: your address">Mail
Me!</A>
Mine would look like this:
<A HREF="mailto:Erikdav@webtv.net">Mail
Me!</A>
You may try it and send me a message if you
like:
Mail
Me!
Again you may center/align it as you wish.
Images are fairly easy. They will have a file
name of .gif or .jpg and can be animated or not.
Unfortnately, webtv users are unable at this time
to download them, so we must link to where we can
find them on the web. You must have permission to
do this first. Of course there is always Draac. He has a huge collection of images you can link to for free. The code is written as follows:
<IMG SRC="http: your URL">
ING SRC tells the browser you are linking to an
image to be displayed on your page. After the
URL of the page you wish to link to you must
include the image name:
<IMG
SRC="https://members.tripod.com/~Constantine_7/gifs/daffy98.gif">
The above would show up on your page like
this:
Images can be centered or aligned.
When text is chosen to be incorporated next to an
image it automatically show up at the bottom,
like this:
Of course there are ways to change that.
You can decide where your text will be put by
including an <ALIGN="top,middle, or bottom"> in
with your IMG SRC code:
<IMG
SRC="https://members.tripod.com/~Constantine_7/gifs/marvin.gif" ALIGN="top">you can try it like this
which would look like:
you can try it like this
Or you can use ALIGN=middle to
look like this
Another option you might want to add is the ALT
command. Some browsers may not be able to read
your image, so by putting in ALT="description of
image" you can let them know what is supposed to
be there:
<IMG SRC="http:// YOUR URL/smile.gif"
ALT="smiley face">
Earlier, I mentioned making an image a clickable
link. Instead of clicking on text to make a link
to another page you can instead do it with an
image. This is done by puting the IMG SRC code in
where the text was in previous examples. ALT is
strongly recommended here so that browsers that
are unable to read the image still have some text
to click on. The code would look like this:
<A
HREF="https://members.tripod.com/~Constantine_7/"><I
MG
SRC="https://members.tripod.com/~Constantine_7/gifs/taz33.gif" ALT="taz"></A>
which looks like this and takes you directly to
my homepage
This will also work with the Mailto option.
Last but not least we come to sounds. They can
come in the form of small sound bites (wavs) or
computerized songs (mids). There are other forms,
but most cannot be used with webtv as of yet so I
will not cover them. There are two ways to put
sounds on your page, embedding and/or background
sound.
When you embed a sound a small speaker shows up
on your page like this: